<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width=900px
    :before-close="close">
    <el-form ref="form" :model="questionItem">
        <el-row style="font-size: 14px; color: #606266; line-height: 36px;">
          <el-col :span="6">
            <el-form-item label="【题型】:">
              <template>
                <div>
                  <span v-if="questionItem.questionType === '1'">单选</span>
                  <span v-else-if="questionItem.questionType === '2'">多选</span>
                  <span v-else>简答</span>
                </div>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【编号】:" >{{questionItem.id}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【难度】:" >
              <template >
                <div>
                  <span v-if="questionItem.difficulty === '1'">简单</span>
                  <span v-else-if="questionItem.difficulty === '2'">一般</span>
                  <span v-else>困难</span>
                </div>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【标签】:">{{questionItem.tags}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="【学科】:">{{questionItem.subjectName}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【目录】:">{{questionItem.directoryName}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【方向】:">{{questionItem.direction}}
            </el-form-item>
          </el-col>
        </el-row>
        <hr />
        <el-row>
          <template>
              <span style="line-height: 36px;">
                <span v-if="questionItem.questionType === '1'">单选题</span>
                <span v-else-if="questionItem.questionType === '2'">多选题</span>
                <span v-else>简答题</span>选项：（以下选中的选项为正确答案）
              </span>
            </template>
          <el-form-item label="【题干】:" style="color:blue; ">
            <span class="question"  v-html="questionItem.question"></span>
            <!-- 单选框 -->
            <template>
              <el-radio-group v-model="radio" v-if="questionItem.questionType === '1'" >
                <el-row v-for="(item,index) in questionItem.options" :key="index" style="margin:10px 0px">
                  <el-radio :label="item.id" >{{item.title }}</el-radio>
                </el-row>
              </el-radio-group>
            </template>
            <!-- 多选框 -->
            <template>
              <div v-if="questionItem.questionType === '2'">
                <el-row v-for="(item, index) in questionItem.options" :key="index" style="margin:10px 0px">
                  <el-checkbox v-model="item.id"> {{ item.title }} </el-checkbox>
                </el-row>
              </div>
            </template>
          </el-form-item>
        </el-row>
        <hr />
        <el-row>
          <el-form-item label="【参考答案】:" >
             <template>
              <el-button type="danger" @click="isVideoShow = !isVideoShow">视频答案预览</el-button>
              <el-row style="margin-top:20px;" v-if="isVideoShow">
                <video :src="questionItem.videoURL" controls="controls" class="video"></video>
              </el-row>
             </template>
          </el-form-item>
        </el-row>
        <hr />
        <el-row>
          <el-form-item label="【答案解析】:">
            <span>https://cn.vuejs.org/ 有答案 </span>
          </el-form-item>
        </el-row>
        <hr />
        <el-row>
          <el-form-item label="【题目备注】:">
            <span>https://cn.vuejs.org/ 有答案 </span>
        </el-form-item>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'questionsPreview',
  props: {
    dialogVisible: { type: Boolean, required: true },
    questionItem: { type: Object, required: true }
  },
  data () {
    return {
      radio: 1, // 单选
      isVideoShow: false // 视频按钮
    }
  },
  methods: {
    close () {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit('close')
        })
        .catch(_ => {})
      this.isVideoShow = false
    }
  }
}
</script>
<style  lang='scss' scoped>
.el-form-item {
    margin-bottom: 0;
}
.question{
  ::v-deep p{
    margin:0
  }
}
.video {
  width: 400px;
}

</style>
